<template>
  <UserPage>
    <iframe ref="iframe" class="iframe" :src="src" frameborder="0" @load="onIframeLoad"></iframe>
  </UserPage>
</template>

<script>
import { UserPage } from './style'
import { mapGetters } from 'vuex'
import { loginHost } from '@/config/env'

export default {
  name: 'user',
  components: {
    UserPage,
  },
  computed: {
    ...mapGetters(['userInfo', 'config']),
  },
  watch: {
    config (val) {
      this.sendIframeMessage({
        primaryColor: val.primaryColor,
      })
    },
  },
  data () {
    return {
      src: `${loginHost}/#/account/settings?from=${window.location.origin}&iframe=true`
      // src: `http://localhost:8000/account/settings?from=${window.location.origin}&iframe=true`
    }
  },
  mounted () {
    this.$store.dispatch('getUserInfo')
  },
  methods: {
    onIframeLoad () {
      this.sendIframeMessage({
        primaryColor: this.config.primaryColor,
      })
    },
    sendIframeMessage (data) {
      const iframe = this.$refs.iframe.contentWindow
      // const origin = 'http://localhost:8000'
      const origin = loginHost
      console.log('sendMessage')
      iframe.postMessage({
        type: 'config',
        data,
      }, origin)
    },
  },
}
</script>
